<template>
  <view class="user-info">
    <image class="user-info__bg" src="/static/user-bg.jpg" />
    <view class="user-info__box">
      <view class="user-info__portrait">
        <image
          :src="(userInfo && userInfo.avatar) || '/static/missing-face.png'"
          class="user-info__portrait-img"
        />
      </view>
      <view class="user-info__info-box">
        <text class="user-info__username" @click="clickUserInfoBox">
          {{ (userInfo && userInfo.username) || '点击登录' }}
        </text>
      </view>
    </view>
    <view :class="{ 'user-info__vip-card': true, active: isMember }">
      <image class="user-info__vip-card-bg" src="/static/vip-card-bg.png" />
      <!-- #ifndef MP-WEIXIN -->
      <view
        v-if="!isMember"
        class="user-info__vip-card-btn"
        @click="handleCreateMember"
      >
        立即开通
      </view>
      <!-- #endif -->
      <view class="user-info__vip-card-title">
        <text class="iconfont icon-yuedu"></text
        >{{ isMember ? `${appName}会员` : '开通会员权益' }}
      </view>
      <template v-if="isMember">
        <text class="user-info__vip-card-name">{{ memberName }}</text>
        <text class="user-info__vip-card-des">全场书籍任性看</text>
      </template>
      <template v-else>
        <text class="user-info__vip-card-name">成为年费会员</text>
        <text class="user-info__vip-card-des">全场书籍任性看</text>
      </template>
    </view>
  </view>
</template>

<script>
import { mapGetters } from 'vuex';
import { APP_NAME } from '../../../config';

export default {
  computed: {
    ...mapGetters(['hasLogin', 'userInfo', 'baseInfo', 'isMember']),
    memberName() {
      if (this.isMember) {
        const { name = '', expired } = this.baseInfo.member || {};
        const leftDays = Math.ceil(
          (expired - Date.now()) / (24 * 60 * 60 * 1000)
        );
        if (name === '自定义天数会员') {
          return `还剩 ${leftDays} 天到期`;
        } else {
          return `${name}, 还剩 ${leftDays} 天到期`;
        }
      }
      return '';
    },
  },

  data() {
    return {
      appName: APP_NAME,
    };
  },

  methods: {
    /**
     * 点击用户信息box
     */
    clickUserInfoBox() {
      if (!this.hasLogin) {
        uni.navigateTo({
          url: '/pages/login/index',
        });
      } else {
        this.copyUserid();
      }
    },

    handleCreateMember() {
      // TODO 处理开通会员
      uni.showToast({
        title: '请在关于我们中联系\r\n管理员添加会员',
        icon: 'none',
        duration: 5000,
      });
    },

    copyUserid() {
      uni.setClipboardData({
        data: '您的用户ID是: ' + this.userInfo.userid,
        success: function () {
          uni.showToast({ icon: 'success', title: '已拷贝用户ID' });
        },
      });
    },
  },
};
</script>

<style lang="scss">
.user-info {
  height: 520rpx;
  padding: 100rpx 30rpx 0;
  position: relative;
  &__bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    filter: blur(1px);
    opacity: 0.7;
  }

  &__box {
    height: 180rpx;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1;
  }

  &__portrait {
    width: 130rpx;
    height: 130rpx;
    border: 5rpx solid #fff;
    border-radius: 50%;
    &-img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }

  &__username {
    font-size: $font-lg + 6rpx;
    color: $font-color-dark;
    margin-left: 20rpx;
  }

  &__vip-card {
    &.active {
      background: linear-gradient(
        to left,
        rgba(20, 30, 48, 0.8),
        rgba(36, 59, 85, 0.9)
      );
    }

    display: flex;
    flex-direction: column;
    color: #f7d680;
    height: 240rpx;
    background: linear-gradient(
      to left,
      rgba(128, 128, 128, 0.8),
      rgba(128, 128, 128, 0.9)
    );
    border-radius: 16rpx 16rpx 0 0;
    overflow: hidden;
    position: relative;
    padding: 20rpx 24rpx;

    &-bg {
      position: absolute;
      top: 20rpx;
      right: 0;
      width: 380rpx;
      height: 260rpx;
    }

    &-btn {
      position: absolute;
      right: 20rpx;
      top: 16rpx;
      width: 132rpx;
      height: 40rpx;
      text-align: center;
      line-height: 40rpx;
      font-size: 22rpx;
      color: #36343c;
      border-radius: 20px;
      background: linear-gradient(to left, #f9e6af, #ffd465);
      z-index: 1;
    }

    &-title {
      font-size: $font-base + 2rpx;
      color: #f7d680;
      margin-bottom: 28rpx;

      .iconfont {
        color: #f6e5a3;
        font-weight: bold;
        font-size: 18px;
        margin-right: 8px;
        position: relative;
        top: -1px;
      }
    }

    &-des {
      font-size: 24rpx;
      color: #d8cba9;
      margin-top: 10rpx;
    }
  }
}
</style>
